<script setup>
import { inject, ref } from "vue";
import { addressListApi, shopCityApi, userCityApi } from "@/services/address";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useaddressStore } from "@/stores/address";

const citylist = ref([]);
const lat = ref("");
const cityname = ref("");
const keyword = ref("");
const lng = ref("");

getcityls();
function getcityls() {
  shopCityApi({ keyword: keyword.value }).then((res) => {
    console.log(res);

    citylist.value = res.data;
  });
}

const search = () => {
  getcityls();
};

// function getcityls() {
//   userCityApi().then((res) => {
//     console.log(res);
//     citylist.value = res.data;
//   });
// }
onShow(() => {
  if (uni.getStorageSync("cityname")) {
    cityname.value = uni.getStorageSync("cityname");
  }

  // #ifdef MP-WEIXIN
  uni.authorize({
    scope: "scope.userLocation",
    success() {
      // 用户已经同意小程序使用定位功能

      uni.getLocation({
        type: "wgs84", // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
        success: function (res) {
          console.log("当前位置的经度：" + res.longitude);
          console.log("当前位置的纬度：" + res.latitude);
          lat.value = res.latitude;
          lng.value = res.longitude;
          // console.log("QQMapWX", qqmapsdk.value, QQMapWX);
          // //使用jdk的方法解析
          // QQMapWX.reverseGeocoder({
          //   location: [lat.value, lng.value].join(","),
          //   success: function (res) {
          //     console.log("sdaasasa", res.result);
          //   },
          // });
          // addressListFun();
        },
        fail: function (error) {
          lat.value = "";
          lng.value = "";
          addressListFun();
          console.error("获取位置失败：", error);
        },
      });
    },
    fail() {
      // 用户拒绝了小程序使用定位功能的权限
      uni.showModal({
        title: "提示",
        content: "此功能需要获取您的地理位置，请确认授权",
        success: function (modalRes) {
          if (modalRes.confirm) {
            uni.openSetting(); // 引导用户去设置中开启权限
          }
        },
      });
    },
  });

  // #endif
  // #ifndef MP-WEIXIN
  console.log("获取位置");

  uni.getLocation({
    type: "wgs84", // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
    success: function (res) {
      console.log("当前位置的经度：" + res.longitude);
      console.log("当前位置的纬度：" + res.latitude);
      lat.value = res.latitude;
      lng.value = res.longitude;
      // addressListFun();
    },
    fail: function (error) {
      console.error("获取位置失败：", error);
      lat.value = "";
      lng.value = "";
      // addressListFun();
    },
  });

  // #endif
});
const addressdwFun = () => {
  if (!lat.value) {
    uni.showToast({
      title: "请到设置允许获取位置",
      icon: "none",
    });
    return;
  }
  userCityApi({ lat: lat.value, lng: lng.value }).then((res) => {
    console.log(res);
    uni.setStorageSync("getcityname", res.data.city);
    // uni.setStorageSync("citycode", res.data.code);
    cityname.value = res.data.city;

    uni.switchTab({
      url: "/pages/address/index",
    });

    // citylist.value = res.data;
  });
};

const selecityfun = (item) => {
  uni.setStorageSync("cityname", item.name);
  uni.setStorageSync("citycode", item.code);

  uni.switchTab({
    url: "/pages/address/index?code=" + item.code,
  });
};
</script>

<template>
  <view class="city">
    <view class="content-search">
      <u-search
        placeholder="搜索城市"
        v-model="keyword"
        @search="search"
      ></u-search>
      <view class="search-address" @click="addressdwFun" v-if="cityname">
        <up-icon
          name="map-fill"
          color="#8C8C8C"
          size="32rpx"
          style="margin-top: 0rpx"
        ></up-icon>

        <text>当前定位: {{ cityname }}</text>
      </view>
      <view class="search-address" @click="addressdwFun" v-if="!cityname">
        <up-icon
          name="map-fill"
          color="#8C8C8C"
          size="32rpx"
          style="margin-top: 0rpx"
        ></up-icon>

        <text>点击定位</text>
      </view>
    </view>

    <view class="content">
      <view class="content-item" v-for="(item, index) in citylist" :key="index">
        <view class="content-item-title">{{ item[0] && item[0].p }}</view>
        <view class="content-item-content">
          <!-- {{ item }} -->
          <view
            class="content-item-content-item"
            @click="selecityfun(item2)"
            v-for="(item2, index2) in item"
            :key="index2"
          >
            {{ item2.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./city.scss";
</style>
